<template>
  <div class="portal-container">
    <div class="app-container">
      <span class="app-title"><i class="el-icon-s-goods" />应用中心</span>
      <el-tabs v-model="appCategory">
        <el-tab-pane label="全部应用" name="" />
        <el-tab-pane v-for="(category,index) in apps" :key="index" :label="category.title" :name="category.title" />
      </el-tabs>
      <div class="app-content">
        <el-collapse v-model="activeCategorys">
          <el-collapse-item
            v-for="(category, index) in apps"
            :key="index"
            :title="category.title"
            :name="category.title"
          >
            <ul class="app-wraper">
              <li
                v-for="(app, i) in category.children"
                :key="i"
                @click="handleNavigateApp(app)"
              >
                <div class="app-top">
                  <i :class="app.icon" :style="{color:app.color}" />
                  <p>{{ app.name }}</p>
                </div>
                <div class="app-bottom">
                  <p>{{ app.desc }}</p>
                </div>
              </li>
            </ul>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Portal',
  data() {
    return {
      appCategory: '',
      apps: [{
        title: '已上线',
        children: [{
          id: '671104113282387968',
          name: '接口人管理',
          icon: 'el-icon-s-custom',
          desc: '接口人管理（cpl）',
          color: '#67C23A',
          href: 'http://www.baidu.com'
        },
        {
          id: '673605666534854656',
          name: '职能平台车型信息库',
          icon: 'el-icon-truck',
          desc: '职能平台车型信息库（RDCar）',
          color: '#409EFF',
          href: 'http://www.baidu.com'
        }]
      }, {
        title: '办公',
        children: [{
          name: '办公采购',
          icon: 'el-icon-star-on',
          desc: '办公采购的描述',
          color: '#333',
          href: 'http://www.baidu.com'
        },
        {
          name: '办公采购2',
          icon: 'el-icon-star-on',
          desc: '办公采购2的描述',
          color: '#888',
          href: 'http://www.baidu.com'
        },
        {
          name: '办公采购3',
          icon: 'el-icon-star-on',
          desc: '办公采购3的描述',
          color: '#999',
          href: 'http://www.baidu.com'
        }]
      },
      {
        title: '其他',
        children: [{
          name: '人力资源',
          icon: 'el-icon-star-on',
          desc: '办公采购的描述',
          color: '#333',
          href: 'http://www.baidu.com'
        },
        {
          name: '人力资源2',
          icon: 'el-icon-star-on',
          desc: '人力资源2的描述',
          color: '#888',
          href: 'http://www.baidu.com'
        },
        {
          name: '人力资源3',
          icon: 'el-icon-star-on',
          desc: '人力资源3的描述',
          color: '#999',
          href: 'http://www.baidu.com'
        }]
      }
      ],
      activeCategorys: []
    }
  },
  computed: {
  },
  mounted: function() {
    this.createActiveCategorys()
  },
  methods: {
    createActiveCategorys() {
      this.activeCategorys = this.apps.map(item => {
        return item.title
      })
    },
    handleNavigateApp(app) {
      const {
        id, name, icon, desc, color, href
      } = app
      if (!id) {
        this.$$message('未配置应用id')
        return
      }
      const routeUrl = this.$router.resolve({
        path: '/transfer',
        query: {
          appId: id
        }
      })
      window.open(routeUrl.href)
    }
  }
}
</script>

<style lang="scss" scoped>
.portal-container{
  .app-container{
    .app-title{
      font-size: 16px;
      i{
        margin-right: 8px;
        color:aqua;
        font-size: 18px;
      }
    }
    .app-content ::v-deep{
      .el-collapse-item__header{
        justify-content: flex-end;
        flex-direction: row-reverse;
        background: rgba(0,0,0,0);
        height: 36px;
        line-height: 36px;
        border-bottom: none;
      }
      .el-collapse-item__arrow{
        margin-left: 0;
      }
      .el-collapse-item__content{
        padding-bottom: 0;
        ul.app-wraper{
          list-style: none;
          padding-left: 8px;
          display: inline-flex;
          >li{
            width: 150px;
            margin-right: 16px;
            position: relative;
            &:not(:last-of-type)::after{
              content: ' ';
              height: 100%;
              position: absolute;
              right: 0;
              top: 0;
              border-left: 1px solid #ccc;
            }
            p{
              transition: all 0.3s
            }
            &:hover{
              p{
                color: #409EFF !important;
                cursor: pointer;
              }
            }
            .app-top{
              display: flex;
              align-items: center;
              i{
                margin-right: 4px;
                font-size: 14px;
              }
              p{
                margin: 4px 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            .app-bottom{
              p{
                margin: 4px 0 4px 18px;
                color: #7e7e7e;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}
</style>
